<template>
  <div class="echarts05" ref="echarts05"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  data() {
    return {
      myecharts: null,
      option: {
        title: {
          text: "地区销售排行",
          left: 20,
          top: 10,
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "bold"
          }
        },
        xAxis: {
          type: 'category',
          data: [],
          splitLine: {
            show: false
          },

          axisLine: {
            lineStyle: {
              color: '#fff',

            },
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff'
            },
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            return `地区: ${params[0].name}<br/>销量: ${params[0].value}`;
          },
          backgroundColor: 'rgba(50, 50, 50, 0.7)',
          borderColor: '#333',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            data: [],
            type: 'bar',
            itemStyle: {
              color: {
                type: 'linear',
                x: 0, y: 0, x2: 0, y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(84, 83, 238, 0.9)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(167, 109, 229, 0.9)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              },
              borderRadius: [30, 30, 0, 0], // 四个角的圆角半径
              borderWidth: 0 // 边框宽度
            },
            barWidth: '40%' // 控制柱子宽度
          }
        ]
      },
      ws: null,
      page: 1
    }
  },
  methods: {
    getData() {
      this.ws = new WebSocket('ws://127.0.0.1:9998');
      this.ws.onopen = () => {
        console.log('连接成功');
        let params = {
          action: 'getData',
          socketType: 'rankData',
          chartName: 'rank',
          value: ''
        }
        this.ws.send(JSON.stringify(params));

        this.ws.onmessage = (e) => {
          let data = JSON.parse(e.data);
          // console.log(data);

          let ranks = JSON.parse(data.data)

          ranks.sort((a, b) => b.value - a.value)
          // console.log(ranks);


          let total = Math.ceil(ranks.length / 7)
          // console.log(total);

          // 截取当前页数减一乘五到当前页数乘五的数据
          let list = ranks.slice((this.page - 1) * 7, this.page * 7)
          console.log(list);

          // console.log(this.page);

          this.option.xAxis.data = list.map(item => item.name)
          this.option.series[0].data = list.map(item => item.value)

          this.myecharts.setOption(this.option);

          this.page++
          if (this.page > total) {
            this.page = 1
          }
        }
      }
    }
  },
  mounted() {
    this.myecharts = echarts.init(this.$refs["echarts05"]);
    // this.myecharts.setOption(this.option);
    this.getData()
  }
}
</script>
<style scoped>
.echarts05 {
  width: 100%;
  height: 100%;
}
</style>